<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="display: flex;justify-content: space-around">
        <fieldset>
            <legend>注册</legend>
            <table>
                <tr>
                    <td>
                        名字
                    </td>
                    <td>
                        <input id="regist-name">
                    </td>
                </tr>
                <tr>
                    <td>
                        用户名
                    </td>
                    <td>
                        <input id="regist-account">
                    </td>
                </tr>
                <tr>
                    <td>
                        密码
                    </td>
                    <td>
                        <input id="regist-pwd">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" id="regist-btn" style="width: 100%">注册</button>
                    </td>
                </tr>
            </table>
        </fieldset>

        <fieldset>
            <legend>登录</legend>
            <table>
                <tr>
                    <td>
                        名字
                    </td>
                    <td>
                        <input id="login-name">
                    </td>
                </tr>
                <tr>
                    <td>
                        密码
                    </td>
                    <td>
                        <input id="login-pwd">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" id="login-btn" style="width: 100%">登录</button>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>

    <div>
        <button onclick="getUserInfo(this)">获取用户信息</button>
        <div>

        </div>
    </div>

    <fieldset>
        <legend>验证码</legend>
        <img id="caotcha-img" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" onclick="javascript:this.setAttribute('src','http://localhost/cross/users/getCaptcha?v='+new Date().getTime()+'&token='+window.localStorage.token)">
        <input id="captchar">
        <button type="button" onclick="captchaValid()">验证码校验</button>
    </fieldset>
</body>
<script src="jquery-2.2.3.min.js"></script>
<script>
    $(function () {
        // 入口函数，通常使用与window.onload是一样的功效，区别：
        //在jQuery文件加载之后，同时当前的window下已经有了$和jquery对象后，才去执行
        $('#regist-btn').on('click', function () {
            regist()
        })
        $('#login-btn').on('click', function () {
            login()
        })

    })

    /**
     * 注册函数
     */
    function regist() {
        future.ajax({
            url: '/users/regist',
            type: 'post',
            data: {
                name: $('#regist-name').val(),
                pwd: $('#regist-pwd').val(),
                account: $('#regist-account').val()
            },
            success: function (result) {
                alert(result)
            }
        })
    }

    /**
     * 登录函数
     */
    function login() {
        future.ajax({
            url: '/users/login',
            type: 'get',
            data: {
                name: $('#login-name').val(),
                pwd: $('#login-pwd').val()
            },
            success: function (result) {
                window.localStorage.setItem('token',result)
                alert('登录成功，令牌已拿到')
            }
        })
    }

    function captchaValid() {
        future.ajax({
            url: '/users/captchaValid',
            type: 'get',
            data:{
              captcha: $("#captchar").val()
            },
            success: function (result) {
                alert('验证成功')
            }
        })
    }

    function getUserInfo(obj) {
        future.ajax({
            url: '/users/getUserInfo',
            type: 'get',
            success: function (result) {
                $(obj).siblings('div').text(JSON.stringify(result));
            }
        })
    }

    //封装的概念
    //工具类容器
    var future = {}

    /**
     * 基础地址
     * @type {string}
     */
    future.baseurl = 'http://localhost/cross'
    /**
     * 自定义ajax函数
     * @param options[JSON]
     */
    future.ajax = function (options) {
        $.ajax({
            beforeSend: function(request){
                if(window.localStorage.token){
                    request.setRequestHeader('token',window.localStorage.token)
                }
            },
            url: future.baseurl + options.url,
            type: options.type || 'post',
            async: options.async || false,
            data: options.data,
            success: function (result) {
                if(options.success){
                    options.success(result)
                }
            },
            error: function (error) {
                if(options.error){
                    options.error(error)
                } else {
                    alert(error.responseText)
                }
            }
        })
    }

    /**
     * 设置cookie
     */
    function setCookie(name, value, seconds) {
        seconds = seconds || 0;   //conds有值就直接赋值，没有为0，这个根php不一样。
        var expires = "";
        // cookies随浏览器关闭而失效的方法:
        //     如果不设置Expires的属性那么Cookie的存活时间就是在关闭浏览器的时候。
        if (seconds != 0 ) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
    }

    /**
     * 读取cookie
     */
    function getCookie(name) {
        var nameEQ = name + '='
        var ca = document.cookie.split(';') // 把cookie分割成组
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i] // 取得字符串
            while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
                c = c.substring(1, c.length) // 有的话，从第二位开始取
            }
            if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
                return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
            }
        }
        return false
    }

    /**
     * 检查cookie
     * @param c_name
     * @return {boolean}
     */
    function checkCookie(c_name) {
        username = getCookie(c_name);
        console.log(username);
        if (username != null && username != "") {
            return true;
        }
        else {
            return false;
        }
    }

    /**
     * 清除cookie
     * @param name
     */
    function clearCookie(name) {
        setCookie(name, "", -1);
    }
</script>
</html>